<template>
  <div>
    <p>
<!--      <button @click="add()" class="btn btn-white btn-default btn-round">-->
<!--        <i class="ace-icon fa fa-edit"></i>-->
<!--        新增-->
<!--      </button>-->
      &nbsp;
      <button @click="list(1)" class="btn btn-white btn-default btn-round">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button>
    </p>
    <pagination ref="pagination" v-bind:list="list"></pagination>
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr>
        <th>ID</th>
        <th>手机号</th>
        <th>密码</th>
        <th>昵称</th>
        <th>头像url</th>
        <th>注册时间</th>
<!--        <th>操作</th>-->
      </tr>
      </thead>

      <tbody>
      <tr v-for="member in members">
              <td>{{member.id}}</td>
              <td>{{member.mobile}}</td>
              <td>{{member.password}}</td>
              <td>{{member.name}}</td>
              <td>{{member.photo}}</td>
              <td>{{member.registerTime}}</td>
<!--        <td>-->
<!--          <div class="hidden-sm hidden-xs btn-group">-->

<!--            <button v-on:click="edit(member)" class="btn btn-xs btn-info">-->
<!--              <i class="ace-icon fa fa-pencil bigger-120"></i>-->
<!--            </button>-->

<!--            <button v-on:click="del(member.id)" class="btn btn-xs btn-danger">-->
<!--              <i class="ace-icon fa fa-trash-o bigger-120"></i>-->
<!--            </button>-->

<!--          </div>-->
<!--        </td>-->
      </tr>
      </tbody>
    </table>
    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">表单</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-10">
                  <input v-model="member.mobile" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input v-model="member.password" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-10">
                  <input v-model="member.name" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">头像url</label>
                <div class="col-sm-10">
                  <input v-model="member.photo" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">注册时间</label>
                <div class="col-sm-10">
                  <input v-model="member.registerTime" class="form-control">
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button v-on:click="save()" type="button" class="btn btn-primary">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>

<script>
import Pagination from "../../components/pagination.vue"
export default {
  components: {Pagination},
  name: "business-member",
  data: function () {
    return {
      member: {},
      members: [],
    }
  },
  mounted: function () {
    let _this = this;
    _this.$refs.pagination.size = 5;
    _this.list(1);
    // sidebar激活样式方法一
    // this.$parent.activeSidebar("business-member-sidebar")
  },
  methods: {
    // /**
    //  * 点击【新增】
    //  */
    // add() {
    //   let _this = this;
    //   _this.member = {};
    //   $("#form-modal").modal("show");
    // },
    // /**
    //  * 点击【编辑】
    //  */
    // edit(member) {
    //   let _this = this;
    //   _this.member = $.extend({}, member);
    //   $("#form-modal").modal("show");
    // },
    // /**
    //  * 点击【保存】
    //  */
    // save() {
    //   let _this = this;
    //
    //   // 保存校验
    //   if (1 != 1
    //     || !Validator.require(_this.member.mobile, "手机号")
    //     || !Validator.length(_this.member.mobile, "手机号", 1, 11)
    //     || !Validator.require(_this.member.password, "密码")
    //     || !Validator.length(_this.member.name, "昵称", 1, 50)
    //     || !Validator.length(_this.member.photo, "头像url", 1, 200)
    //   ) {
    //     return;
    //   }
    //
    //   Loading.show()
    //   _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/member/save', _this.member).then((response)=>{
    //     Loading.hide()
    //     // console.log("添加会员结果：",response)
    //     if (response.data.success) {
    //       $("#form-modal").modal("hide");
    //       _this.list(_this.$refs.pagination.page)
    //      if(_this.member.id) {
    //        Toast.success("编辑成功！");
    //      }else {
    //        Toast.success("新增成功！");
    //      }
    //     }else {
    //       Toast.warning(response.data.message)
    //     }
    //   })
    // },
    // /**
    //  * 点击【删除】
    //  */
    // del(id) {
    //   let _this = this;
    //   Confirm.show("删除后无法恢复当前数据",function () {
    //     Loading.show()
    //     _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/member/delete/' + id).then((response)=>{
    //       Loading.hide()
    //       // console.log("删除会员结果：",response)
    //       if (response.data.success) {
    //         _this.list(_this.$refs.pagination.page)
    //         Toast.success("删除成功！")
    //       }
    //     })
    //   })
    // },
    /**
     * 列表查询
     */
    list(page) {
      let _this = this;
      Loading.show()
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/member/list', {
        page: page,
        size: _this.$refs.pagination.size
      }).then((response)=>{
        Loading.hide()
        //console.log("查询会员列表结果：",response)
        _this.members = response.data.content.list
        _this.$refs.pagination.render(page, response.data.content.total)
      })
    }
  }
}
</script>

<style scoped>

</style>